<template>
  <a-modal title="提交审批" :visible="show" @ok="handleOk" @cancel="handleCancel" width="600px" :maskClosable="false">
    <div>
      <a-form-model ref="mainForm" :model="flow" style="display: flex; flex-direction: column">
        <a-form-model-item label="申请人">
          <UserInputSelector
                    :username.sync="flow.applyUserId"
                    :realname.sync="flow.applyUser"
                    :disabled="payment.status == '2'"
                    multiple="multiple"
                    placeholder="请选择"
                  />
        </a-form-model-item>
        <a-form-model-item label="使用部门" v-if="['2'].indexOf(flow.flowType) > -1">
          <UserInputSelector
                    :username.sync="flow.userDeptUserId"
                    :realname.sync="flow.userDeptUser"
                    :disabled="payment.status == '2'"
                    multiple="multiple"
                    placeholder="请选择"
                  />
        </a-form-model-item>
        <a-form-model-item label="维护部门" v-if="['2'].indexOf(flow.flowType) > -1">
          <UserInputSelector
                    :username.sync="flow.keepDeptUserId"
                    :realname.sync="flow.keepDeptUser"
                    :disabled="payment.status == '2'"
                    multiple="multiple"
                    placeholder="请选择"
                  />
        </a-form-model-item>
        <a-form-model-item label="项目部门主管" v-if="['2', '3'].indexOf(flow.flowType) > -1">
          <UserInputSelector
                    :username.sync="flow.proDeptManagerId"
                    :realname.sync="flow.proDeptManager"
                    :disabled="payment.status == '2'"
                    multiple="multiple"
                    placeholder="请选择"
                  />
        </a-form-model-item>
        <a-form-model-item label="合同签订部门主管" v-if="['1'].indexOf(flow.flowType) > -1">
          <UserInputSelector
                    :username.sync="flow.contractSignManagerId"
                    :realname.sync="flow.contractSignManager"
                    :disabled="payment.status == '2'"
                    multiple="multiple"
                  />
          
        </a-form-model-item>
      </a-form-model>
    </div>
  </a-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
export default {
  components: {
  },
  data() {
    return {
      flow: {},
      urls: {
        flow: '/workReport/payment/flow/info',
        flowEdit: '/workReport/payment/flow/edit',
      },
      paymentId: "0",
      taskDefKey: "",
      show: false
    }
  },
  mounted() { },
  methods: {
    open(paymentId, taskDefKey) {
      this.paymentId = paymentId
      this.taskDefKey = taskDefKey
      this.show = true
      this.fetchFlow()
    },
    fetchFlow() {
      if (this.paymentId != '-1') {
        getAction(this.urls.flow + '/' + this.paymentId, {}).then((res) => {
          if (res.success) {
            this.flow = res.result
            this.existPersonMap = {}
            if (this.flow) {
              this.$set(this.existPersonMap, this.flow.applyUser, this.flow.applyUserId)
              this.$set(this.existPersonMap, this.flow.proDeptManager, this.flow.proDeptManagerId)
              this.$set(this.existPersonMap, this.flow.proManager, this.flow.proManagerId)
              this.$set(this.existPersonMap, this.flow.followUser, this.flow.followUserId)
              if (this.flow.userDeptUserId) {
                let userDeptUser = this.flow.userDeptUser.split(',')
                let userDeptUserId = this.flow.userDeptUserId.split(',')
                for (let i = 0; i < userDeptUser.length; i++) {
                  this.$set(this.existPersonMap, userDeptUser[i], userDeptUserId[i])
                }
              }
              if (this.flow.keepDeptUserId) {
                let keepDeptUser = this.flow.keepDeptUser.split(',')
                let keepDeptUserId = this.flow.keepDeptUserId.split(',')
                for (let i = 0; i < keepDeptUser.length; i++) {
                  this.$set(this.existPersonMap, keepDeptUser[i], keepDeptUserId[i])
                }
              }
              this.$set(this.existPersonMap, this.flow.costDeptUser, this.flow.costDeptUserId)
              this.$set(this.existPersonMap, this.flow.budgetUser, this.flow.budgetUserId)
              this.$set(this.existPersonMap, this.flow.budgetDeptHead, this.flow.budgetDeptHeadId)
              this.$set(this.existPersonMap, this.flow.purchaseDeptUser, this.flow.purchaseDeptUserId)
              this.$set(this.existPersonMap, this.flow.contractSignManager, this.flow.contractSignManagerId)
              this.$set(this.existPersonMap, this.flow.deptHeader, this.flow.deptHeaderId)
              this.$set(this.existPersonMap, this.flow.postUser, this.flow.postUserId)
              this.$set(this.existPersonMap, this.flow.settlementUser, this.flow.settlementUserId)
            }
          } else {
            this.$messageWorkReport.error(res.message)
          }
        })
      }
    },
    handleCancel() {
      this.show = false
    },
    handleOk() {
      if (['2'].indexOf(this.flow.flowType) > -1 && (!this.flow.userDeptUser || !this.flow.userDeptUserId)) {
        return this.$messageWorkReport.warning('请选择使用部门审批人员')
      }
      if (['2'].indexOf(this.flow.flowType) > -1 && (!this.flow.keepDeptUser || !this.flow.keepDeptUserId)) {
        return this.$messageWorkReport.warning('请选择维护部门审批人员')
      }
      if (['2', '3'].indexOf(this.flow.flowType) > -1 && (!this.flow.proDeptManager || !this.flow.proDeptManagerId)) {
        return this.$messageWorkReport.warning('请选择项目部门主管')
      }
      if (
        ['1'].indexOf(this.flow.flowType) > -1 &&
        (!this.flow.contractSignManager || !this.flow.contractSignManagerId)
      ) {
        return this.$messageWorkReport.warning('请选择合同签订部门主管')
      }
      if (!this.taskDefKey) {
        postAction(this.urls.flowEdit, this.flow).then((res) => {
          if (res.success) {
            this.$messageWorkReport.success("提交成功");
            if (this.$route.path.startsWith('/workReport/accept/add')) {
              let urlJump = this.$router.resolve({ path:'/workReport/editPayment/' + this.flow.paymentId })
              window.open(urlJump.href, '_blank')
              window.close()
            } else {
              this.$emit("submitSuccess");
            }
          } else {
            this.$messageWorkReport.error(res.message)
          }
        })
        this.$emit('submitFlowForm')
      } else {
        this.$emit('reSelectUser', this.flow)
      }
      this.handleCancel()
    },

  },
}
</script>
<style scoped>
/deep/.ant-form .ant-row .ant-form-item-label {
  text-align: right;
  vertical-align: middle;
}

/deep/.ant-form .ant-row .ant-form-item-label {
  width: 130px !important;
}

/deep/form .ant-select {
  width: 80% !important;
}

.userTag {
  padding: 5px 10px;
  margin: 2px;
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 3px;
  line-height: 20px;
  display: inline-block;
}

.userTag:hover {
  padding: 5px 10px;
  margin: 2px;
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 3px;
  line-height: 20px;
  color: red;
  display: inline-block;
}

.removeUserTag {
  margin-right: 0px;
  cursor: pointer;
}
</style> 